<template>
  <div>
    <page-header :title="$t('productAttribute.title')">
      <n-button type="primary" @click="handleClickAdd">{{
        $t("productAttribute.addBtn")
      }}</n-button>
    </page-header>
    <div class="mt-[16px]">
      <n-grid x-gap="12" :cols="4">
        <n-gi>
          <n-select
            clearable
            :options="STATUS_LIST"
            placeholder="请选择状态"
            v-model:value="dataQueryForm.status"
            @update:value="handleSearch"
          />
        </n-gi>
        <n-gi>
          <n-input
            placeholder="请输入类别名称"
            v-model:value="dataQueryForm.name"
            @keyup.enter="handleSearch"
          />
        </n-gi>
      </n-grid>
      <div class="mt-[16px]"></div>
      <n-data-table
        :loading="tableResult.loading"
        :columns="columns"
        :data="tableResult.dataList"
        :bordered="false"
        :style="{ height: `66vh` }"
      />
      <div class="flex justify-between items-center mt-[16px]">
        <div class="">
          <span>总共{{ tableResult.total }}条数据</span>
        </div>
        <div class="flex items-center">
          <div class="w-[114px] mr-[16px]">
            <n-select />
          </div>
          <div>
            <n-pagination
              :page-size="dataQueryForm.pageSize"
              :page="dataQueryForm.page"
              :page-count="tableResult.pageCount"
            />
          </div>
        </div>
      </div>
    </div>
    <ProductAtrributeModal
      width="750px"
      v-model:show="showModalResult.show"
      :action-type="showModalResult.actionType"
      :form-detail="showModalResult.productAttrDetail"
      @close="showModalResult.show = false"
      @cancel="showModalResult.show = false"
      @create-success="handleCreateSuccess"
      @edit-success="handleEditSuccess"
    />
  </div>
</template>
<script setup lang="ts">
import { reactive, onMounted, h, ref } from "vue";
import { CreateOutline } from "@vicons/ionicons5";
import { debounce, get } from "lodash-es";
import { NButton, NIcon, NSwitch } from "naive-ui";
import { DictStorage } from "@/storage/dict.storage";
import { getProductAttributes } from "@/api/product/productAttribute.api";
import ProductAtrributeModal from "@/components/biz/productAttributeModal/index.vue";
import { ActionTypeEnum } from "@/enums/actionTypeEnum";
import { ProductAttributeDto } from "@/types/model/product/dtos/productAttribute.dto";

const columns = [
  {
    title: "#",
    type: "index",
    key: "key",
    render: (_: any, index: number) => {
      return `${index + 1}`;
    },
  },
  {
    title: "属性名称",
    key: "name",
  },
  {
    title: "唯一编码",
    key: "code",
  },
  {
    title: "状态",
    key: "status",
    render: (row: any) => {
      return h(NSwitch, {
        checkedValue: "1",
        uncheckedValue: "2",
        value: row.status,
        disabled: true,
      });
    },
  },
  {
    title: "操作",
    key: "actions",
    align: "right",
    render: (row: any) => {
      return [
        h(
          NButton,
          {
            size: "small",
            secondary: true,
            onClick: () => handleClickEdit(row),
          },
          {
            icon: () =>
              h(NIcon, null, {
                default: () => h(CreateOutline),
              }),
          }
        ),
      ];
    },
  },
];

const STATUS_LIST = ref<any[]>([]);

const showModalResult = reactive({
  show: false,
  productAttrDetail: {} as ProductAttributeDto,
  actionType: ActionTypeEnum.ADD,
});

const tableResult = reactive({
  loading: false,
  dataList: [],
  total: 0,
  pageCount: 1,
});

const dataQueryForm = reactive({
  page: 1,
  pageSize: 10,
  status: undefined,
  name: "",
});

const handleClickAdd = () => {
  showModalResult.actionType = ActionTypeEnum.ADD;
  showModalResult.productAttrDetail = {} as ProductAttributeDto;
  showModalResult.show = true;
};

const handleClickEdit = async (payload: any) => {
  const attrId = get(payload, "id");
  if (attrId) {
    const productAttrDetail = {
      id: payload.id,
      name: payload.name,
      code: payload.code,
      status: payload.status,
    } as ProductAttributeDto;

    showModalResult.actionType = ActionTypeEnum.EDIT;
    showModalResult.productAttrDetail = productAttrDetail;
    showModalResult.show = true;
  }
};

const handleSearch = debounce(function () {
  dataQueryForm.page = 1;
  getDataList();
}, 200);

const getDataList = async () => {
  try {
    tableResult.loading = true;
    const params = {
      ...dataQueryForm,
    };
    if (params.name.length) {
      params.name = `*${params.name}*`;
    }
    const result = await getProductAttributes(params);
    tableResult.total = get(result, "result.total");
    tableResult.dataList = get(result, "result.records") || [];
    tableResult.pageCount = get(result, "result.pages");
  } finally {
    tableResult.loading = false;
  }
};

const handleCreateSuccess = () => {
  showModalResult.show = false;
  dataQueryForm.page = 1;
  getDataList();
};
const handleEditSuccess = () => {
  showModalResult.show = false;
  getDataList();
};

onMounted(() => {
  STATUS_LIST.value = DictStorage.getDictItemsByCode("pos_category_status");
  getDataList();
});
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
